<template>
  <div class="component-upload-image">
    <el-upload
      class="upload"
      :headers="upload.headers"
      action="/prod-api/common/upload"
      :on-preview="handlePreview2"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-success="handleUpload"
      :file-list="fileList"
    >

      <p>{{fileName}}</p>
      <div style="float: right;margin-left: 50px;margin-top: -30px">
      <img v-if="value" :src="value" class="avatar"/>
      <i v-else class="el-icon-plus avatar-uploader-icon" ></i>
      </div>
    </el-upload>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";

export default {
  components: {},
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      upload: {
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
      },
      docList:[],
      popoverOffset:0,
      currFile:{},
      fileForm:{},
      files:[],
      fileList:[],
      levelList:[],
      responseFiles:[],
      updateButton:false,
    };
  },
  props: {
    fileName:'',
    fileIds:{
      type:Array,

    },
    value: {
      type: String,
      default: "",
    },
  },
  methods: {
    handleUpload(response, file, fileList) {
      console.log('response：', response)
      if (response.code == 200) {
        this.fileList.push({id: response.id, name: response.originalName, url: response.fileName});
        this.fileIds[0]=this.fileList.map(item=>item.id).join(',');

      }
    },
    beforeRemove(file, fileList) {
      console.log(111)
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handleRemove(file, fileList) {
      this.fileList = this.fileList.filter(item => {
        return item.id != file.id;
      });
      this.fileIds[0]=this.fileList.map(item=>item.id).join(',');
    },
    //上传相关
    handlePreview(file) {
      //弹出预览、下载
      setTimeout(() => {
        var e = document.createEvent('MouseEvents')
        e.initEvent('click', true, true)
        document.getElementById('world').dispatchEvent(e)
      }, 0)
      //判断点击的第几个文件
      this.currFile = file;
      let index = 0;
      this.fileList.forEach((item, i) => {
        if (item.id == this.currFile.id) {
          index = i;
        }
      })
      //移动弹出框到指向点击文件
      setTimeout(() => {
        this.popoverOffset = (this.fileList.length - 1 - index) * 35;
        let ppover = document.getElementById('world');
        ppover.style.marginTop = `${-this.popoverOffset}px`;
        this.$forceUpdate();
      }, 0)
    },
    handlePreview2(file) {
      //弹出预览、下载
      setTimeout(() => {
        var e = document.createEvent('MouseEvents')
        e.initEvent('click', true, true)
        document.getElementById('world2').dispatchEvent(e)
      }, 0)
      //判断点击的第几个文件
      this.currFile = file;
      let index = 0;
      this.fileList.forEach((item, i) => {
        if (item.id == this.currFile.id) {
          index = i;
        }
      })
      //移动弹出框到指向点击文件
      setTimeout(() => {
        this.popoverOffset = (this.fileList.length - 1 - index) * 35;
        let ppover = document.getElementById('world2');
        ppover.style.marginTop = `${-this.popoverOffset}px`;
        this.$forceUpdate();
      }, 0)
    },

    handleUploadSuccess(res) {
      this.$emit("input", res.url);
      this.loading.close();
      this.msgSuccess("上传成功");
    },
    handleBeforeUpload() {
      this.loading = this.$loading({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    handleUploadError() {
      this.$message({
        type: "error",
        message: "上传失败",
      });
      this.loading.close();
    },
  },
  watch: {},
};
</script>

<style scoped lang="scss">
.avatar {
  width: 100%;
  height: 100%;
  margin-left: 100px;
}
</style>
